<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Complexspiral Redux</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]><script src="../../ie7-standard-p.js" type="text/javascript"></script><![endif]-->
<style type="text/css">
<!--
body {position: relative; margin: 0; padding: 0;}
div#content {margin: 5em 5em 10em 5em; padding: 10px;
   color: black; font-family: Arial, sans-serif; border: solid #963;}
div#content p {margin: 0 1em 1em; padding: 0; line-height: 1.3;}
h1 {margin: 0.5em -4px 0.5em; padding: 0.33em 0 0.167em;
   font: bold 200% sans-serif; vertical-align: middle;
   color: #024; letter-spacing: 0.5em; text-transform: lowercase;}
dt {font-weight: bold;}
dd {margin-bottom: 0.66em;}
div#content a:link {color: blue;}
div#content a:visited {color: purple;}
div#content a:link:hover {color: red;}
div#content a:visited:hover {color: maroon;}
code, pre {color: #446; font-family: monospace;}
code {font-size: 110%;}

body {background: white url(glassy-bg.jpg) 0 0 no-repeat fixed;}
div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;}
div#content h1 {background: #CCC url(glassy-gray.jpg) 0 0 no-repeat fixed; border: 1px solid gray; padding: 0.5em 1em 0.25em;}
div#content h2 {background: #CBB196 url(glassy-tan.jpg) 0 0 no-repeat fixed; color: white; padding: 0.5em; margin: 0 -12px 0.5em; border-color: #963; border-width: 1px 0; border-style: solid;}

-->
</style>
</head>
<body>


<div id="content">
<script type="text/javascript" src="../ie7-demo.js"></script>
<h1>complexspiral distorted</h1>
<p>
The page you are viewing right now exists to show off what can be accomplished with pure <a href="http://www.w3.org/TR/REC-CSS1">CSS1</a>, and that's all.  This variant on <a href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html">complexspiral</a> doesn't even use any CSS2 to accomplish its magic.  Remember: as you look this demo over, there is <em>no</em> Javascript here, nor are <em>any</em> PNGs being used, nor do I employ <em>any</em> proprietary extensions to CSS or any other language.  It's all done using straight W3C-recommended markup and styling, all validated, plus a total of four (4) images.

</p>
<p>
Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 will get this right.  Despite some claims to the contrary, IE6/Win's rendering of this page is <strong>not</strong> correct, as it (as well as some other browsers) doesn't correctly support <code>background-attachment: fixed</code> for any element other than the <code>body</code>.  That makes it impossible to pull off the intended effect.  Other browsers may or may not get the effect right.
</p>

<h2>Hands-on: Things to Examine</h2>
<p>
Before you start, make sure you're viewing this page in one of the browsers mentioned above.  Otherwise the descriptions to follow won't match what you see.

</p>
<p>
The first, easiest thing to do is scroll the page vertically.  Make sure you scroll all the way to the very end of the page and back.  Notice how the various areas with colored backgrounds also appear to distort the background image as if through mottled glass.  Try changing the text size and notice how the compositing effect remains consistent.  Then make your browser window really narrow and scroll horizontally.  Again, everything should remain seamless and consistent.
</p>
<p>
The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, is only possible using fixed-attachment backgrounds in CSS.  (Okay, maybe it could be done in Flash; I don't know.)  I don't think it's even possible with IE's proprietary filters, but even if this effect is possible with filters, I could easily enough devise one that isn't.
</p>

<h2>I missed the original complexspiral demo-- how does this work?!?</h2>
<p>
Glad you asked.  The effect demonstrated here is achieved by using fixed background images, nothing more.  For example, the main-content area (the blue part here) uses the following styles for the default spiral-shell background:
</p>
<pre>
div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;}
</pre>
<p>

The above is equivalent to these styles:
</p>
<pre>
div#content {
   background-color: white;
   background-image: url(glassy-ripple.jpg);
   background-position: 0 0;
   background-repeat: no-repeat;
   background-attachment: fixed;
   }
</pre>
<p>
The effect of these longer rules is exactly the same; they're just split out into individual background properties for more detailed consideration by you, gentle reader.
</p>
<p>
First, check out the rippled-shell image found here: <a href="glassy-ripple.jpg">url(glassy-ripple.jpg)</a>.  Then come back to this page and I'll continue with the explanation.  All done?  Great.
</p>
<p>
According to CSS, any background image that is "fixed" using <code>background-attachment: fixed;</code> is fixed with respect to the <strong>viewport</strong>-- <em>not</em> the element with which the image is associated.  So I set the rippled-shell background image to be aligned with the top left corner of the browser window (the viewport) with the values given for <code>background-position</code>.  However, the image will only be visible wherever is intersects with the element to which it's been assigned.  Therefore, even though the top left corner of the rippled-shell image is aligned with the top left corner of the viewport, we can only see it wherever it intersects with a <code>div</code> that has an <code>id</code> with a value of <code>content</code> (which, again, happens to be the one containing this text).

</p>
<p>
So I set a fixed background for the <code>BODY</code>, the content <code>DIV</code>, and <code>H1</code> and <code>H2</code> elements scattered through the document.  In any given case of an element's display, we see whatever part of the associated background image intersects with the element.  The rest of the background image remains hidden.
</p>
<p>
And <em>that's</em> how it works.

</p>

<h2>I'm not seeing the compositing!</h2>
<p>
Then I'm willing to bet that you're using Internet Explorer for Windows (any version), or possibly Opera (version 6 or earlier).  Neither of these browsers fully support <code>background-attachment: fixed</code> for elements other than <code>body</code>.  In the case of both, images are fixed with respect to the elements that contain them, not the browser window, which is not what CSS1 defines <code>background-attachment: fixed</code> to mean, although browsers are allowed to ignore <code>fixed</code> if they stick to CSS1 (CSS2 requires its implementation for conformance).  And yes, this page uses a strict DOCTYPE, so IE6 is in "<a href="http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp">strict mode</a>."  I guess when <a href="http://www.microsoft.com/windows/ie/evaluation/features/default.asp#section5">Microsoft claims 100% CSS1 compliance</a>, they're referring to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the <a href="http://www.w3.org/TR/REC-CSS1">CSS1 specification</a>.  It tends to make me wonder how limited or flawed their "full support" is for other key open specifications, like HTML and DOM.

</p>

<h2>Image credits</h2>
<ul>
<li>Nautilus shell: scanned by and copyright Eric A. Meyer
</ul>

<h4>Jump to</h4>
<ul>
<li><a href="demo.html">complex spiral (original)</a></li>
<li><a href="demo2.html">complex spiral (devolved)</a></li>
<li><a href="http://www.meyerweb.com/eric/css/edge/index.html">css/edge home</a></li>

</ul>

</div>

</body>
</html>